<template>
  <el-container>
    <el-header>
      <h1>品牌管理</h1>
    </el-header>
    <div style="display: flex ;margin-left: 500px">
      <el-input v-model="input" style="width: 240px" placeholder="请输入品牌" />
      <el-button :disabled="input.length===0" @click='setInfo'  type="primary">搜索</el-button>
    <el-button @click="addBrand" style="width: 100px;margin-left: 350px" type="info">添加品牌</el-button></div>
    <el-main>
      <el-table :data="brand" style="width: 100%" >
        <el-table-column prop="names" label="品牌名称" width="200"></el-table-column>
        <el-table-column prop="images" label="品牌Logo" width="200">
          <template #default="{ row }">
            <img v-if="brand[0].id!==0" :src="row.images" alt="品牌Logo" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="presentations" label="品牌描述" width="500"></el-table-column>
        <el-table-column label="操作" width="250" >
          <template #default="{ row }">
            <el-button :disabled="brand[0].id===0"  type="primary" size="small" @click="editBrand(row)">编辑</el-button>
            <el-button :disabled="brand[0].id===0" type="danger" size="small" @click="deleteBrand(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" title="品牌操作" direction="rtl" size="50%">
      <!-- 添加文章表单 -->
      <el-form :model="brandModel" label-width="100px">
        <el-input v-model="brandModel.name" style="width: 240px" placeholder="请输入品牌名" />
        <el-form-item label="品牌logo" >
          <el-upload class="avatar-uploader" on-exceed="exceeds" :auto-upload="true" :show-file-list="false"  element-loading-text="正在上传" action="http://localhost:8080/upload"  name="file" :headers="{'Authorization':tokenStore.token.data}"
                     :on-success='uploadSuccess'>
            <img width="50px" height="50px" v-if="brandModel.image" :src="brandModel.image" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="品牌简述">
          <div class="editor">
            <el-input
                v-model="brandModel.presentation"
                style="width: 300px"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入品牌内容"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tokeBrand">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-container>
</template>

<script setup>

import {ref} from "vue";
import {useTokenSotre} from "@/stores/token";
import {ElMessage, ElMessageBox} from "element-plus";
const tokenStore = useTokenSotre()
console.log(tokenStore.token)
const brand = ref([
  {
    id:0,
    names: '',
    images: '',
    presentations: '',
  },
],)
const editBrand = (row)=>{
    drawer.value=1
    visibleDrawer.value=true
    brandModel.value.name=brand.value[0].names
    brandModel.value.image=brand.value[0].images
    brandModel.value.presentation=brand.value[0].presentations
    fix.value=0
}
//编辑品牌

const input=ref('')
//添加品牌
const addBrand = ()=>{
  drawer.value=0
  visibleDrawer.value=true
  clearInfo()
}
const clearInfo=()=>{
      brandModel.value.name=''
      brandModel.value.image=''
      brandModel.value.presentation= ''
}
const drawer = ref(0)
//删除分类
const deleteBrand=(row)=>{
  ElMessageBox.confirm(
      '请问您确定要删除吗',
      '提醒',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await deleteBrandService(row.id)
        clearInfo()
        brand.value[0]=''
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//控制抽屉是否显示
const visibleDrawer = ref(false)
const exceeds=()=>{
  ElMessage.error("图片过大")
}

const brandModel = ref({
  id:'',
  name:'s',
  image: '',
  presentation: '',
})


import {brandInsertService, deleteBrandService} from '@/api/brand'
const fix = ref(1)
const tokeBrand = async ()=>{
  if (fix.value===1){
    console.log(brandModel.value.image)
    let result = brandInsertService(brandModel.value)
    if (result.data===1){
      ElMessage.success("添加成功")
      visibleDrawer.value=false
      clearInfo()
    }

  }else {
    updateInfo()
  }


}

//上传成功的回调函数
const uploadSuccess=(result)=>{
  brandModel.value.image = result.data
  console.log(result.data)
}
import {brandInfoService,upBrandInfoService} from '@/api/brand'
const setInfo=async ()=>{
  let result =await brandInfoService(input.value)
  brandModel.value = result.data
  console.log(result.data)
  console.log(brandModel.value)
  brand.value[0].id=result.data.id
  brand.value[0].images=result.data.image
  brand.value[0].presentations=result.data.presentation
  brand.value[0].names=result.data.name

}

const updateInfo=async ()=>{
  await upBrandInfoService(brandModel.value)
  ElMessage.success("修改成功")
  visibleDrawer.value=false
  clearInfo()
}


</script>